<template>
    <div>
        <el-button type="text" @click="createItem">创建一项</el-button>
        <div v-for="(item, index) in selectedArr" :key="index" class="margin-16">
            <el-row type="flex">
                <el-input v-model="item.name" placeholder="请输入块名称" />
                <el-button type="danger" icon="el-icon-delete" style="margin-left: 12px" @click="deleteItem(index)">
                </el-button>
                <el-button type="success" icon="el-icon-plus" style="margin-left: 12px" @click="addSingle(index)">
                </el-button>
            </el-row>
            <div v-if="item.list && item.list.length">
                <div v-for="(jtem,j) in item.list" :key="j" style="margin-top:12px">
                    <el-select v-if="jtem.obj" v-model="jtem.obj._id" value-key="_id" filterable remote reserve-keyword
                        placeholder="请输入关键词" :remote-method="remoteMethod" :loading="loading"
                        @focus="currentIndex = index; currentJ = j" style="max-width:178px">
                        <el-option-group v-for="group in jtem.selectOptions" :key="group.type"
                            :label="group.type | getTypeName">
                            <el-option v-for="ktem in group.list" :key="ktem._id" :label="ktem.name" :value="ktem._id">
                                <span style="float: left">{{ ktem.name }}</span>
                                <span style="float: right; color: #8492a6; font-size: 13px">{{ ktem.tag && ktem.tag[0]
                                    && ktem.tag[0].mid &&
                                    ktem.tag[0].mid.name }}</span>
                            </el-option>
                        </el-option-group>
                    </el-select>
                    <el-input v-model="jtem.num" placeholder="数量" style="margin-left: 12px;max-width:120px">
                    </el-input>
                    <el-button type="info" icon="el-icon-minus" style="margin-left: 12px"
                        @click="deleteSingle(index, j)"></el-button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        props: {
            fixNumber: {
                type: Boolean,
                default: false
            },
            mid: String,
            selectedArr: {
                // 已选择的数据
                type: Array,
                default: function () {
                    return [
                        {
                            id: "",
                            num: null,
                        },
                    ];
                },
            },
            module: {
                type: Array,
                default: function () {
                    // ["materials", "foods", "anims", "natures", "heros", "geographys"]
                    return ["materials", "foods", "anims", "natures"];
                },
            },
        },
        data() {
            return {
                currentIndex: 0, // 当前选中下拉框的索引
                currentJ: 0,
                loading: false,
            };
        },
        watch: {
            selectedArr(newValue) {
                this.$emit("update:selectedArr", newValue);
            },
        },
        methods: {
            addSingle(index) {
                let item = {}
                if (this.fixNumber) {
                    item = {
                        obj: {
                            _id: "",
                            num: 0,
                        },
                        num: this.fixNumber ? 1 : 3
                    }
                } else {
                    item = {
                        obj: {
                            _id: "",
                            num: 0,
                        }
                    }
                }
                this.selectedArr[index].list.push(item);
            },
            deleteSingle(i, j) {
                this.selectedArr[i].list.splice(j, 1);
            },
            deleteItem(index) {
                this.selectedArr.splice(index, 1);
            },
            createItem() {
                this.selectedArr.push({
                    name: '',
                    list: []
                });
            },
            /**
             * @description 获取搜索数据
             * @param {String} query 当前输入的值
             */
            async remoteMethod(query) {
                if (!query) {
                    return;
                }
                this.loading = true;
                let response = await this.axios("/search", {
                    params: {
                        version: this.$store.state.version,
                        searchVal: query,
                        module: this.module,
                        mid: this.mid,
                    },
                });
                this.loading = false;
                return (this.selectedArr[this.currentIndex].list[this.currentJ].selectOptions =
                    response.data);
            },
        },
        filters: {
            getTypeName(val) {
                let hashMap = {
                    foods: "食物",
                    anims: "生物",
                    hero: "人物",
                    geographys: "地理",
                    natures: "自然",
                    materials: "科技",
                };
                return hashMap[val];
            },
        },
    };
</script>
<style lang="scss" scoped>
    .margin-16:not(:first-of-type) {
        margin-top: 12px;
    }
</style>